class Enlarge {
    constructor(ele) {
        this.ele = document.querySelector(ele);
        this.init();
    }
    init() {
        // 获取需要用到的元素
        this.mediaLeft = document.querySelector(".media-left");
        this.mediaLeftImg = this.mediaLeft.querySelector("img");
        this.mask = this.mediaLeft.querySelector(".mask");

        this.enlarge = this.ele.querySelector(".enlarge");
        this.img = this.ele.querySelector(".enlarge img");

        // 给media-Left盒子绑定鼠标移入事件
        this.mediaLeft.onmouseover = () => {
            this.mask.style.display = "block";
            this.enlarge.style.display = "block";

            // 应该设置 放大镜的盒子的宽高
            this.setStyle();
        };

        // 鼠标移出 media-Left盒子的时候 隐藏 mask和enlarge
        this.mediaLeft.onmouseout = () => {
            this.mask.style.display = "none";
            this.enlarge.style.display = "none";
        };

        // 绑定media-Left盒子中的移动事件
        this.mediaLeft.onmousemove = () => {
            let e = window.event;

            this.move(e);
        };
    }
    setStyle() {
        // mask盒子的大小/mediaLeft盒子的大小 = 放大镜盒子的大小/放大镜背景图的大小
        // 放大镜大宽度 = 放大镜背景图的宽度 * mask盒子的宽度 / mediaLeft盒子的宽度
        // '750px 1000px'  拿到750   1000
        let style = window.getComputedStyle(this.enlarge).backgroundSize;
        let bgx = parseInt(style.split(" ")[0]);
        let bgy = parseInt(style.split(" ")[1]);

        let maskW = this.mask.offsetWidth;  //黄色盒子的宽度
        let maskH = this.mask.offsetHeight;

        let mediaLeftW = this.mediaLeft.offsetWidth;
        let mediaLeftH = this.mediaLeft.offsetHeight;

        let width = (bgx * maskW) / mediaLeftW;
        let height = (bgy * maskH) / mediaLeftH;


        this.enlarge.style.width = width + "px";
        this.enlarge.style.height = height + "px";
    }
    move(e) {
        let x = e.pageX - this.ele.offsetLeft - this.mask.offsetWidth / 2;
        let y = e.pageY - this.ele.offsetTop - this.mask.offsetHeight / 2;
        console.log(x,y);

        if (x <= 0) {
            x = 0;
        }
        if (y <= 0) {
            y = 0;
        }

        if (x >= this.mediaLeft.offsetWidth - this.mask.offsetWidth) {
            x = this.mediaLeft.offsetWidth - this.mask.offsetWidth;
        }
        if (y >= this.mediaLeft.offsetHeight - this.mask.offsetHeight) {
            y = this.mediaLeft.offsetHeight - this.mask.offsetHeight;
        }
        this.mask.style.left = x + "px";
        this.mask.style.top = y + "px";

        // mask盒子移动的距 / show 盒子的大小 == 背景图移动的距离 / 背景图的大小
        // 背景图移动的距 = 背景图的大小 * mask盒子移动距离 / show盒子的大小
        // 背景图移动的距离 写在 background-postion:x y
        
        let imgx = this.img.offsetWidth; //获取图片的大小
        let imgy = this.img.offsetHeight;

        let bpx = (imgx * x) / this.mediaLeft.offsetWidth;
        let bpy = (imgy * y) / this.mediaLeft.offsetHeight;
  
        // 设置background-position的属性
        this.img.style.left = -bpx + 'px';
        this.img.style.top = -bpy + 'px';
    }
    
}
